<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="../css/estilos.css" type="text/css" />
        <script type="text/javascript" src="../js/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="../js/jquery.fancybox-1.3.4.pack.js"></script>
        <link rel="stylesheet" type="text/css" href="../css/jquery.fancybox-1.3.4.css" media="screen" />
        
        <!-- Needed for Range Element -->
        <link href="../webforms/css/slider.css" rel="stylesheet" type="text/css"/>  
        <script type="text/javascript" src="../webforms/js/frequency-decoder.com/slider.js"></script>
        
        <!-- Needed for Date/Time Elements -->
        <link type="text/css" rel="stylesheet" href="../webforms/js/jscalendar-1.0/calendar-win2k-1.css" />
        <script type="text/javascript" src="../webforms/js/jscalendar-1.0/calendar.js"></script>
        <script type="text/javascript" src="../webforms/js/jscalendar-1.0/lang/calendar-en.js"></script>
        <script type="text/javascript" src="../webforms/js/jscalendar-1.0/calendar-setup.js"></script>
        
        <!--<script type="text/javascript" src="../webforms/js/weston.ruter.net/webforms2/webforms2_src.js"></script>-->
        
        <!-- Need for range -->
        <script type="text/javascript" src="../webforms/js/modernizr.com/modernizr-1.5.min.js"></script>
        <script type="text/javascript" src="../webforms/js/html5.js"></script>
         <script type="text/javascript" src="../webforms/js/EventHelpers.js"></script>
        <script type="text/javascript" src="../webforms/js/html5Widgets.js"></script>
        
        <script type="text/javascript">
            $(document).ready(function() {
                var list = [0,0];
                $('input:password').bind('keyup', function(e) {
                    if ($(this).val().length >= 6 && list[0] == 0) {
                        var val = $('#dureza').val() + 2;
                        $('#repaint').html('<meter value="'+val+'" min="1" max="5" id="dureza">'+val+'</meter>');
                        list[0] = 1;
                    } else if ($(this).val().length < 6 && list[0] == 1) {
                        var val = $('#dureza').val() - 2;
                        $('#repaint').html('<meter value="'+val+'" min="1" max="5" id="dureza">'+val+'</meter>');
                        list[0] = 0;
                    }
                    
                    if ($(this).val().length >= 9 && list[1] == 0) {
                        var val = $('#dureza').val() + 2;
                        $('#repaint').html('<meter value="'+val+'" min="1" max="5" id="dureza">'+val+'</meter>');
                        list[1] = 1;
                    } else if ($(this).val().length < 9 && list[1] == 1) {
                        var val = $('#dureza').val() - 2;
                        $('#repaint').html('<meter value="'+val+'" min="1" max="5" id="dureza">'+val+'</meter>');
                        list[1] = 0;
                    }
                });
                
                $("#form-reg").submit(function(e) {
                    e.preventDefault();
                    parent.$.fancybox.close();
                });
            });
        </script>
    </head>
    <body style="background-color: aliceblue; background-image: url();">
        <div id='twitter'>
            <form action="" id="form-reg" method="post">
                <div id='name' class='outerDiv'>
                    <label for="name">Nombre:</label>
                    <input type="text" name="name" placeholder="Perico" required  />
                    <div class='message' id='nameDiv'> Introduzca su nombre completo. </div>

                </div>
                <div class='clearfix'></div>
                <div id='username' class='outerDiv'>
                    <label for="number">Usuario:</label>
                    <input type="text" name="username" placeholder="usuario" required  />
                    <div class='message' id='usernameDiv'> Elija un nombre de usuario. </div>
                </div>
                <div class='clearfix'></div>

                <div id='password' class='outerDiv'>
                    <label for="password">Contraseña:</label>
                    <input type="password" name="password" required />
                    <div id="repaint"><meter value="1" min="1" max="5" id="dureza">1</meter></div>
                </div>
                <div class='clearfix'></div>
                <div id='email' class='outerDiv'>
                    <label for="email">Email:</label>
                    <input type="email" name="email" placeholder="prueba@uma.es" required />
                    <div class='message' id='emailDiv'> Escriba su dirección e-mail. </div>
                </div>
                <div class='clearfix'></div>
                <div id='edad' class='outerDiv'>                    
                    <label for="edad">Edad: </label>
                    <input type="range" name="edad" value="0" min="0" max="120" required />
                    <output class="out-fecha" onforminput="this.value = edad.value + ' años'">0 años</output>
                </div>
                <div class='clearfix'></div>
                <div id='fecha' class='outerDiv'>
                    <label for="meeting">Fecha: </label>
                    <input id="meeting" type="date" value="2011-01-13"/>
                    <div class='message' id='fechaDiv'> Escoja una fecha. </div>
                </div>
                <div class='clearfix'></div>
                <div id='url' class='outerDiv'>
                    <label for="urlText">Dirección Web:</label>
                    <input type="url" name="urlText" placeholder="http://www.uma.es" />
                    <div class='message' id='emailDiv'> Escriba su dirección web. </div>
                </div>
                <div class='clearfix'></div>
                <div id='submit' class='outerDiv'>
                    <input type="submit" value="Crear Cuenta" />
                </div>
                <div class='clearfix'></div>
            </form>
            <div class='clearfix'></div>
        </div>

    </body>
</html>
